<template>
  <div class="xtsz-wrapper">
    <div class="dict-wrapper clearfix">
      <el-card v-for="dict in dict" :key="dict.id"  class="box-card">
        <div slot="header" class="clearfix">
          <span>{{dict.name}}
            <i class="el-icon-plus" style="margin-left: 10px;" @click="openAdd(dict)"></i>
            <i class="el-icon-edit-outline" v-if="dict.id !== 'origindata'"  @click="openEdit(dict)"></i>
            <i class="el-icon-delete" v-if="dict.id !== 'origindata'"  @click="removeItem(dict.id)"></i>
          </span>
        </div>
        <div v-for="child in dict.child" :key="child.id" class="child-item">
          {{child.name}}<i v-if="dict.id !== 'origindata'" style="margin-left: 10px;"  class="el-icon-edit-outline" @click="openEdit(child)"></i>
          <i v-if="dict.id !== 'origindata'"  class="el-icon-delete" @click="removeItem(child.id)"></i>
        </div>
      </el-card>
    </div>
    <el-dialog :title="form.id ? '编辑字典/字段': '添加字典/字段'" :visible.sync="showForm" width="600px"> 
      <el-form :model="form" style="padding-right:100px;">
        <el-form-item v-if="!form.id" label="所属字典：" label-width="120px">
          <el-input type="text" disabled v-model="form.pidName" />
        </el-form-item>
        <el-form-item v-if="form.pid === '0'" label="字典：" label-width="120px">
          <el-input type="text" v-model="form.name" />
        </el-form-item>
        <el-form-item v-if="form.pid !== '0'" label="字段：" label-width="120px">
          <el-input type="text" v-model="form.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showForm = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      dict: [],
      showForm: false,
      form: {
        id: '',
        pid: '',
        name: '',
        pidName: ''
      },
      formVerify: {
        name: '请输入字段内容'
      }
    }
  },
  mounted() {
    this.getAllDict();
  },
  methods:{
    openAdd(dict) {
      formUtil.resetData(this.form);
      this.form.pidName = dict.name;
      this.form.pid = dict.id;
      this.form.flag = 1;
      this.showForm = true;
    },
    openEdit(dict) {
      this.form = formUtil.deepCopy(dict);
      this.showForm = true;
    },
    async getAllDict() {
      let result = await this.$httpN.postQ('crm/dict/list');
      let dictTop = result.filter(item => item.pid === '0');
      dictTop.forEach(item => item.child = []);
      this.dict = dictTop;
      result.forEach(element => {
        this.dict.forEach((item) => {
          if(item.id === element.pid) item.child.push(element)
        })
      });

      let originData = await this.$httpN.get('crm/dict/customerPlat');
      let origin = {
        id: 'origindata',
        name: '客户来源',
        child: originData
      }

      this.dict.push(origin)
    },
    async saveForm() {
      if(!formUtil.verifyData(this.form, this.formVerify)) return;
      if(this.form.pid !== 'origindata') {
        if(!await this.$httpN.postB('crm/dict/save', this.form)) return;
      }else {
        if(!await this.$httpN.postB('crm/dict/addCustomerPlat', {name: this.form.name}, false)) return;
      }
      formUtil.submitSuccess('保存成功');
      this.showForm = false;
      this.getAllDict();
    },
    removeItem(id) {
      formUtil.submitConfirm('此操作将永久删除字典或字段, 是否继续?', async ()=> {
        if(!await this.$httpN.postB('crm/dict/delete', [id], false)) return;
        formUtil.submitSuccess('删除成功');
        this.getAllDict()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .xtsz-wrapper{
    padding: 20px;
    height: calc(100vh - 60px);
    overflow: auto;
    .dict-wrapper{
      display: flex;
      flex-wrap: wrap;
    }
    .box-card{
      i{
        cursor: pointer;
        margin-right: 3px;
      }
      width:300px;
      margin: 0 10px 10px;
      .child-item{
        margin-bottom: 5px;
      }
    }
  }
</style>